<script setup lang="ts">
import { ref } from 'vue'
import zsyh from '../../assets/image/bank-list/zsyh.png'
import gsyh from '../../assets/image/bank-list/gsyh.png'
import nyyh from '../../assets/image/bank-list/nyyh.png'
import zgyh from '../../assets/image/bank-list/zgyh.png'
import jsyh from '../../assets/image/bank-list/jsyh.png'
import jtyh from '../../assets/image/bank-list/jtyh.png'
import zxyh from '../../assets/image/bank-list/zxyh.png'
import gdyh from '../../assets/image/bank-list/gdyh.png'
import pfyh from '../../assets/image/bank-list/pfyh.png'
import msyh from '../../assets/image/bank-list/msyh.png'
import yzyh from '../../assets/image/bank-list/yzyh.png'
import bankList from '@/utils/bankList'

const searchValue = ref('')
const searchlist = ref<any>([])
const hotList = ref([
    {
        name: '招商银行',
        icon: zsyh,
    },
    {
        name: '工商银行',
        icon: gsyh,
    },
    {
        name: '农业银行',
        icon: nyyh,
    },
    {
        name: '中国银行',
        icon: zgyh,
    },
    {
        name: '建设银行',
        icon: jsyh,
    },
    {
        name: '交通银行',
        icon: jtyh,
    },
    {
        name: '中信银行',
        icon: zxyh,
    },
    {
        name: '中国光大银行',
        icon: gdyh,
    },
    {
        name: '浦发银行',
        icon: pfyh,
    },
    {
        name: '中国民生银行',
        icon: msyh,
    },
    {
        name: '中国邮政储蓄银行',
        icon: yzyh,
    },
])
function handleSelect(name: string) {
    uni.$emit('updateData', name)
    uni.navigateBack()
}
function handleSearch(e: any) {
    console.log(e, 'e')
    const value = e.detail.value
    const list = bankList.filter(i => i.name.includes(value))
    searchlist.value = list
}
</script>

<template>
    <NavbarContainer>
        <div class="box-border min-h-100vh w-full bg-#ffffff px-30rpx">
            <div class="box-border h-88rpx w-full">
                <input v-model="searchValue" type="text" confirm-type="search"
                       class="box-border h-full w-full rounded-44rpx bg-#fafafa px-30rpx" placeholder="搜索银行名称"
                       @input="handleSearch">
            </div>
            <div v-if="!searchValue.length" class="hot-box">
                <div class="fs-24 fc-lightgray">热门银行</div>
                <div class="myflex">
                    <div v-for="(item, index) in hotList" :key="index" class="myflex flex-item"
                         @click="handleSelect(item.name)">
                        <image :src="item.icon" class="icon-bank" mode="widthFix" />
                        <div class="mg-l-16">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div v-else class="search-box">
                <div v-if="searchlist.length" class="bank-list">
                    <div v-for="(item, i) in searchlist" :key="i" class="search-item" @click="handleSelect(item.name)">
                        {{
                            item.name }}
                    </div>
                </div>
                <div v-else class="hint">
                    没有搜到该银行，请检查输入是否正确或直接使用 <text class="fc-blue" data-name="{{ searchValue }}"
                                                 @click="handleSelect(searchValue)">
                        {{
                            searchValue }}
                    </text>
                </div>
            </div>
        </div>
    </NavbarContainer>
</template>

<style scoped>
.fc-blue {
    color: #3E5FF5;
}

.search-item {
    line-height: 100rpx;
    font-size: 30rpx;
    border-bottom: 1rpx solid rgba(126, 134, 142, 0.16);
}

.search-box {
    max-height: calc(100vh - 100rpx - constant(safe-area-inset-bottom));
    max-height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
    overflow: auto;
}

.search-box {
    position: relative;
}

.hint {
    text-align: center;
    font-size: 28rpx;
    color: #9497B1;
    margin-top: 100rpx;
}

.mg-l-16 {
    margin-left: 16rpx;
}

.flex-item {
    flex-basis: 50%;
    margin-top: 36rpx;
    font-size: 30rpx;
}

.fs-24 {
    font-size: 24rpx;
}

.fc-lightgray {
    color: #9EA1BB;
}

.hot-box {
    margin-top: 70rpx;
    padding: 0 34rpx;
}

.myflex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.icon-bank {
    width: 40rpx;
    height: 40rpx;
}
</style>

<route lang="json">
{
    "layout": "default"
}
</route>
